import React, { Component } from 'react'
import styles from "./storeMain.module.scss"
import { withRouter } from "react-router-dom"
import { connect } from "react-redux"
/*
    这是商铺页面主体组件，大组件
    导入到了pages/FoodStore/index.js中
    覃金波 2020年8月22日17:48:02
*/

class StoreMain extends Component {


    // 回到首页
    toHome = () => {
        this.props.history.push("/")
    }

    scolllHandle = () => {
        this.props.changeOffsetTop()
    }


    changeStore = (storeId, name) => {

        this.props.history.push("/foodStore/" + storeId)
        this.props.changeActive(name)
    }

    componentDidMount() {
        window.addEventListener("scroll", this.scolllHandle)
    }

    componentWillUnmount() {
        window.removeEventListener("scroll", this.scolllHandle)
    }
    render() {
        return (
            <div id={styles.storeMain} className={this.props.top > 236 ? styles.topActive : ""}>
                <div className={`${this.props.top >= 236 ? styles.topSearch : styles.topNoActive}`}>
                    <div onClick={this.toHome} className={styles.toHome}>
                        <svg className="icon" aria-hidden="true">
                            <use href="#icon-zuojiantou"></use>
                        </svg>
                    </div>
                    <div className={styles.searchBox}>麻椒鸡</div>
                    <div className={styles.redPK}>
                        <svg className={styles.icon} aria-hidden="true">
                            <use href="#icon-hongbao1"></use>
                        </svg>
                    </div>
                    <div className={styles.collect}>
                        <svg className="icon" aria-hidden="true">
                            <use href="#icon-xingxing1"></use>
                        </svg>
                    </div>
                    <div className={styles.share}>
                        <svg className="icon" aria-hidden="true">
                            <use href="#icon-shenglvehao"></use>
                        </svg>
                    </div>
                </div>
                <div className={styles.storeMain}>
                    <div className={styles.mainNav}>
                        <div onClick={() => { this.changeStore("order/" + this.props.shopID, "order") }} className={styles.navItem}><span className={(this.props.state === "order" ? styles.active : "")} >点餐</span></div>
                        <div onClick={() => { this.changeStore("comment/" + this.props.shopID, "comment") }} className={styles.navItem}><span className={(this.props.state === "comment" ? styles.active : "")}>评价</span></div>
                        <div onClick={() => { this.changeStore("merchant/" + this.props.shopID, "merchant") }} className={styles.navItem}><span className={(this.props.state === "merchant" ? styles.active : "")}>商家</span></div>
                    </div>
                </div>
            </div>
        )
    }
}

const mapPropsToState = (state) => {
    return {
        state: state.foodStoreReducer.selectedNav,
        top: state.foodStoreReducer.offsetTop
    }
}
const mapActionToState = (dispatch) => {
    return {
        changeActive(name) {
            dispatch({
                type: name
            })
        },
        changeOffsetTop() {
            let top = document.documentElement.scrollTop;
            dispatch({
                type: "top",
                payload: top
            })
        }
    }
}


export default connect(mapPropsToState, mapActionToState)(withRouter(StoreMain))